<template>
	<view class="page"  style="background-image: linear-gradient(180deg, #ffc300 0%, #ffffff00 100%);" :style="{ 'padding-top': top + 'px' }">


	<view class=" section_top" >
		<view class="flex-row section " >

		  <view class="flex-col self-start group">
		   <view class="flex-row items-center space-x-8">
			   <getlocation   :type="0" color="#000000"></getlocation>
		    </view>
		    <text class="self-start text_2">店铺/服务</text>
		    <text class="font_1 text_3">5秒匹配离您最近的服务商</text>
		  </view>
		  <image
		    class="self-center image"
		    src="https://qiniu.ccchongya.com/chongya/images/16947555401294557130.png"
		  />


		</view>


		<view class="top" style="background:#FAF5E6">
			<view class="navbar" :class="showNavFloat ? 'floatbar' : ''">
				<view class="menu flex-row justify-between align-center items-center" v-if="category.length > 0">
				   <!-- <view class="menu_left"><</view> -->
				  <view @tap.stop="leftImg()" style="padding:10px 5px 10px 10px;"> <uni-icons class="icon1" type="arrowleft" size="12" color='#CCCCCC'  ></uni-icons></view>
					<view class="category">

						<scroll-view   :scroll-left='leftWidth' :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scroll_category_id" @scroll="navFloatShow()">
							<view
								class="item"
								v-for="(item, index) in category"
								:key="index"
								:class="category_id == item.id ? 'current section_4' : ''"
								:id="'category_id-' + index"
								:style="'width:' + (category.length <= 4 ? 100 / category.length + '%' : '')"
								@tap="categoryChange(item.id, index)"
							>
								<view class="text">
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>

					</view>
					 <view  @tap.stop="rightImg()" style="padding:10px;"> <uni-icons class="icon1" type="arrowright" size="12" color='#CCCCCC'></uni-icons></view>
						   <!-- <view class="menu_">></view> -->
				</view>
			</view>
		</view>

	</view>

		<view class="" style="background:#ffffff">
			<view class="box-c" >
				<!--
				<view class=" flex h-44 flex ">
					 <view @click="back(1)" class="flex padding-lr10 f-a-c van-icon van-icon-arrow-left f20-size"></view>
					<view class="flex f-a-c flex-1">
						<view @click="go('/pages/search/index')" class="flex flex-1 f-a-c b-radius-30 h-36 bg-color-w padding-lr10">
							<view  class="flex f-a-c van-icon van-icon-search f16-size margin-r8"></view>
							<view v-if="title != '' || cateName != ''" @click.stop="clear" class="flex f-a-c b-radius-30 h-28 padding-lr15 bg-color-f7">
								<text v-if="cateName != ''" class="f12-size margin-r4">{{i18n['类目']}}:</text>
								<text class="f12-size margin-r4">{{title != '' ? title : cateName}}</text>
								<text class="flex f-a-c f-j-c van-icon van-icon-cross"></text>
							</view>
							 <input @confirm="changeSort(sort)" v-model="title" type="text" class="input">
						</view>
					</view>

					<view @click="sortType == 1 ? sortType=2 : sortType=1" :class="sortType==1?'van-icon-apps-o':'van-icon-bars'" class="flex f-a-c padding-lr10 van-icon  f20-size"></view>
					<xcx-header></xcx-header>
				</view>
				-->
				<view class="flex h-40">
					<view @click="changeSort('')" :class="sort == '' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1 ">{{i18n['综合']}}</view>
					<!-- <view @click="changeSort('sell_num desc')" :class="sort == 'sell_num desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['销量']}}</view> -->
					<view @click="changeSort('add_time desc')" :class="sort == 'add_time desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">{{i18n['新上架']}}</view>
				<!-- 	<view @click="changeSort('price')" :class="sort == 'price desc' || sort == 'price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c flex-1">
						<text class="margin-r4">{{i18n['价格']}}</text>
						<view class="flex f-c f-a-c f-j-c">
							<text   :class="sort =='price asc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-up"></text>
							<text :class="sort =='price desc' ? 't-color-p' : ''" class="flex f-a-c f-j-c price-down margin-t2"></text>
						</view>
					</view> -->
					<view @click="$refs.popup.open('right')" class="flex f-a-c f-j-c flex-1">
						<text class="margin-r4">{{i18n['筛选']}}</text>
						<text class="flex f-a-c f-j-c van-icon van-icon-filter-o"></text>
					</view>
				</view>
			</view>
			<!-- <view  :style="{ 'padding-top': top +84+ 'px' }"></view> -->

				<!-- <goodslist class="margin-t12" :sortType="sortType" :list="list"></goodslist> -->

					<!-- :style="{height:scrollH+'rpx'}" -->
						<scroll-view   scroll-y="true" class="scroll-Y padding-lr10"
									@scrolltoupper="upper"
									@scrolltolower="getList"
									@scroll="scroll"
									refresher-enabled="true"
									:refresher-triggered="triggered"
									:refresher-threshold="45"
									refresher-background="#fff"
									@refresherpulling="onPulling"
									@refresherrefresh="onRefresh"
									@refresherrestore="onRestore"
									@refresherabort="onAbort"   >

						<!-- <scroller  :style="{height:scrollH+'rpx'}" @init="initScroller" @down="refreshData" @up="getList" :up="optUp" @scroll="navFloatShow(scroller)" :fixed="false"> -->
						 <!--   <swiper v-if="banners.length > 0" class="swiper" :indicator-dots="true" :autoplay="true" :circular="true">
									<swiper-item v-for="(item, index) in banners" :key="index">
										<navigator class="item" hover-class="none" :url="'/pages/article/detail?id=' + item.jump_link">
											<image :lazy-load="true" :src="item.cover" mode="aspectFill"></image>
											<view class="title">
												<text>{{ item.title }}</text>
											</view>
										</navigator>
									</swiper-item>
							</swiper> -->
							<!-- <article_list :list="articles" /> -->
										<view class="flex-col list space-y-12" style="padding:0">


												<view class="flex-row items-center self-stretch shop_section_5 shop_item"  v-for="(item, index) in list" :key="index"  @click="go(shopUrl+item.id)">
												  <image	class="shrink-0 shop_image_7" :src="item.cover"/>
												  <view class="ml-12 flex-col flex-1 " style="justify-content: start">
													<view class="flex-row justify-between items-center">
													  <text class="shop_font">{{item.name}}</text>
													  <text class="shop_font_2 shop_text" @tap.stop="showMaoLocation(item)">距离:{{getdistance(item.longitude,item.latitude)}}</text>
													</view>
													<text class="mt-8 shop_font_3 shop_text_2">{{item.address}}</text>
													<view class="mt-8 flex-row justify-between items-center" style="height:122rpx;overflow:hidden">

															<view  class="flex-row self-stretch shop_group_3 justify-start items-start" style="align-self:baseline">
																<view @tap.stop="go('/pages/search/list?shopId='+item.id+'&cateId='+itemm.id)"  v-if="itemm!=null"   class="flex-col justify-start items-center text-wrapper"  v-for="(itemm,indexx) in item.goodsCates" :key="indexx" >

																	<text  class="shop_font_2"  v-if="itemm.name">{{itemm.name}}</text>

																</view>



															</view>


															<view class="flex-col justify-start items-center shop_text-wrapper_3"><text class="shop_font_5">进入店铺</text></view>
													</view>
												  </view>
												</view>

<view class=" t-color-8" style="text-align: center;">暂时无店铺</view>

										</view>




						</scroll-view>


			<!-- <no-data v-if="list.length <= 0"></no-data> -->
			<view class="padding-10"></view>
			<uni-popup ref="popup" type="right" background-color="#fff">
				<view class="h100 bg-color-w wrap-filter-popup" style="width: 70vw;">
					<scroll-view scroll-y="true" :style="{'height': height+'px'}">
						<view :style="{ 'padding-top': top+44 + 'px' }"></view>
						<view class="padding-10 b-bottom">
							<view class="flex f-a-c f-j-s">
								<text class="f12-size t-color-6">店铺名</text>
							</view>
							<view class="flex margin-t15">
								<view class="flex flex-1 b-radius-30 bg-color-f7 h-30">
									<input v-model="name" class="f12-size input w100 h100" type="string" placeholder="请输入店铺名">
								</view>
							</view>
						</view>
					<!-- 	<view class="padding-10 b-bottom">
							<view class="flex f-a-c f-j-s">
								<text class="f12-size t-color-6">{{i18n['价格区间']}}</text>
							</view>
							<view class="flex margin-t15">
								<view class="flex flex-1 b-radius-30 bg-color-f7 h-30">
									<input v-model="min" class="f12-size input w100 h100" type="number" :placeholder="i18n['最低价']">
								</view>
								<view class="flex f-s-0 f-a-c f-j-c t-color-9 padding-lr15"><text class="b-bottom w-30"></text></view>
								<view class="flex flex-1 b-radius-30 bg-color-f7 h-30">
									<input v-model="max" class="f12-size input w100 h100" type="number" :placeholder="i18n['最高价']">
								</view>
							</view>
						</view> -->
						<view class="padding-10 b-bottom">
							<view class="flex f-a-c f-j-s">
								<text class="f12-size t-color-6">店铺所在地</text>
								<!-- <text @click="provinceShow= !provinceShow" :class="provinceShow ? 'van-icon-arrow-up':'van-icon-arrow-down'" class="flex f-a-c f-j-c van-icon  t-color-9 f15-size"></text> -->
							</view>
							<!-- <view class="grid grid-c-3 grid-g10 margin-t10">
								<view  class="flex f-a-c f-j-c padding-lr2 h-34 b-radius-2 bg-color-f7 f12-size t-color-6">{{i18n['定位中']}}</view>
							</view> -->
							<block>
						<!-- 	<view class="flex f-a-c f-j-s margin-t10">
								<text class="f12-size t-color-6">{{i18n['城市']}}</text>
							</view> -->
						<!-- 	<view class="grid grid-c-3 grid-g10 margin-t10">
								<view @click="chooseProvince(key)" v-for="(item,key) in provinceList" :class="province == key ? 'on t-color-y' : 'bg-color-f7 t-color-6'" class="flex f-a-c f-j-c padding-lr2 h-34 b-radius-2  f12-size ">{{item}}</view>
							</view> -->


							<!-- <button @click="openAddress">打开地址选择器</button> -->
						<!-- 	<view class="flex f-a-c f-j-s " style="margin:10px 0;color:#F87C32">
								{{province}} {{city}} {{area}}
							</view> -->

							<liu-customize-sel ref="scroll" @change='chooseSuccess'   :checkArr_t="checkArr_t"  ></liu-customize-sel>


						<!-- 			<button @click="openAddress">打开地址选择器</button>
									<liu-choose-address ref="scroll" @change='chooseSuccess'></liu-choose-address> -->


							</block>
						</view>
					</scroll-view>
					<view class="flex f-a-c f-j-e padding-lr10 h-60">
						<view class="flex w-160 b-radius-30 h-36 over-h">
							<view @click="reset" class="flex flex-1 f-a-c f-j-c bg-color-linear-y t-color-w">{{i18n['重置']}}</view>
							<view @click="seach()" class="flex flex-1 f-a-c f-j-c bg-color-p t-color-w">{{i18n['确定']}}</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

			<!-- <tab-bar ref="tabbar" :showLogin="true" :active="0" :isShow="false"></tab-bar> -->
					<tab-bar ref="tabbar" :active="1"></tab-bar>
		</view>

		</view>

	</view>
</template>

<script>

// import scroller from '@/components/shops/components/scroller/scroller.vue';
// import article_list from '@/components/shops/components/article/list.vue';
// import pageLoading from '@/components/shops/components/loading/pageLoading.vue';
// import iconfont from '@/components/iconfont/iconfont.vue';
// import util from '@/common/util.js';

// import {adList,articleCate, articleList} from '@/api/article';
// const API = require('@/utils/api/shops.js').default;
const $ = require('@/utils/api.js');
import shopApi from '../../utils/api/shops.js';
const address = require('@/utils/address.js').default;

// import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
// import popupLayer from '@/components/popup-layer/popup-layer.vue';


import getlocation from '@/components/getlocation/index.vue';

let self;


export default {
	components: {
		getlocation,
		// article_list,
		// pageLoading,
		// scroller,
		// iconfont
		// citySelect,
		// popupLayer





	},
	data() {
		return {
			leftWidth:0,
			  leftWidthSw:0,//总宽度
			  swiperInter:null,  //定时器
			  hotsLength:0, // 数组长度


			triggered: false,
			// _freshing: false,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},


			locationtype:2,
			statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
			region: '请选择...', //地区


			top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
			isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
			sortType: 1,
			height: 0,

			page: 1,
			pageSize: 20,
			totalPage: 1,
			title: '',
			shopId: '',
			catePid: '',
			cateTid: '',
			cateId: '',
			shopCateId: '',
			type: '',
			sort: '',
			provinceList: address.province_list,
			provinceShow: false,
			province: '',
				city: '',
					area: '',
					provinceCode: '',
						cityCode: '',
							areaCode: '',
			max: '',
			min: '',
			name: '',
			spread: '',
			cateName: '',

checkArr_t:[],

shopUrl:"/pages/shops/shops?id=",

			list: [],
			keyword:'',
			scroller: {},
			optUp: { auto: true, onScroll: true, page: { size: 10 }, empty: { tip: '暂无文章~' } },
			category_id: 0,
			category_id_change:false,
			category_index: 0,
			scroll_category_id: 'scroll_category_id_0',
			currentSliderIndex: 0,
			category: [],
			showMenu: false,
			banners: [],
			articles: [],
			showNoData: false,
			showPageLoading: true,
			showNavFloat: false,
			navBarHeight: '',
			loadingType: 'more',
			page:0,
			userInfo: {},
			loading: true
		};
	},
	filters: {
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
		},
		numFilter(val) {
			return val >= 0 ? `+${val.toString()}` : val;
		},
		getFinallPrice(price) {
			return price.toFixed(2);
		}
	},
	mounted() {
		// this.$refs.popupRef.close();
	},
	computed: {
		scrollH:function(){
					let sys = uni.getSystemInfoSync();
					let winWidth = sys.windowWidth;
					let winrate = 750/winWidth;
					let winHeight =parseInt(sys.windowHeight*winrate)
					return winHeight-50

		},
		i18n() {
			return this.$t('search')
		},
		finalMoney() {//实时监听总价变化，用于购物车中
		    let finalMoney = 0;
		    for (let item of this.list) {
		        finalMoney += item.price;
		    }
		    return finalMoney;
		},
		 getdistance()
		    {
		      return (longitude,latitude)=>{
						let longitude1 =  uni.getStorageSync('longitude');
						let latitude1 = uni.getStorageSync('latitude');	
					
						 let distance
						 if(longitude1&& latitude1){
							 distance  =   this.mapfun.getDistance(longitude1,latitude1,longitude,latitude)
						 }else{
							 distance  =  "-"
						 }
						 
						 return distance;
		      }
		    }
	},

	onLoad(options) {

		self = this;
		uni.hideTabBar();

			if(options.active && options.active != '') {
										self.shopUrl="/pages/shops/shops?active=3&id="
			}
	

		let height = getApp().globalData.height;
		height = height-60;
		if(this.isIphonex) {
		height-=34;
		}
		this.height = height;
		this.title = options.title ? options.title : '';
		this.catePid = options.catePid ? options.catePid : '';
		this.cateTid = options.cateTid ? options.cateTid : '';
		this.cateId = options.cateId ? options.cateId : '';
		this.shopId = options.shopId ? options.shopId : '';
		this.type = options.type ? options.type : '';
		this.spread = options.spread ? options.spread : '';
		this.cateName = options.cateName ? options.cateName : '';


		//  this.currentUser = getApp().globalData.currentUser;
		// 	region: '请选择...', //地区



		// this.mapfun.getCityinfo().then(res => {
		// 	self.region =  res.province+res.city
		// }).catch(err => {})
		// this.mapfun.getlocation().then(res => {
		// 	this.mapfun.getCityinfo().then(res => {
		// 		self.region =  res.province+res.city
		// 	}).catch(err => {
		// 	})
		// }).catch(err => {})





		this.getCategory();

	},
	onShow(){
	   this.getList();

	},
	onPullDownRefresh() {},
	onReachBottom() {
		if(this.page < this.totalPage) {
			this.page += 1;
			this.getList();
		}

		// if (this.loadingType === 'nomore') return;
		// 	this.getList();
	},
	onPullDownRefresh() {
		uni.showLoading({
			title: '刷新中'
		});
		this.loadData();
	},

	methods: {

						// getdistance(longitude,latitude) {
						// 			let longitude1 =  uni.getStorageSync('longitude');
						// 			let latitude1 = uni.getStorageSync('latitude');	
						// 			 console.log("longitude1",longitude1)
						// 			  longitude1 = 111.339805;
						// 			  latitude1 = 30.651705;
						// 				  latitude1 = 30.680392;
									
									 
						// 			 // console.log("1",longitude1)
						// 			 // console.log("2",latitude1)
						// 			 // console.log("3",longitude)
						// 			 // console.log("4",latitude)
									 
						// 			 let distance
						// 			 if(longitude1&& latitude1){
						// 				 distance  =   this.mapfun.getDistance(longitude1,latitude1,longitude,latitude)
						// 			 }else{
						// 				 distance  =  "-"
						// 			 }
									 
						// 			 return distance;
									 
						// 		},
								// 弹出层显示
								   openPopup() {
								     this.$refs.popup.open();
								   },
								   // 弹出层隐藏
								   closePopup() {
								     this.$refs.popup.close();
								   },
										  openAddress() {
											  this.$refs.scroll.open()
										  },
										  //地址选择成功
										  chooseSuccess(e) {
											  console.log('所选择的地址信息:', e)


											  this.checkArr_t = e.value

											  if(e.value[0]){
												  self.province = e.value[0].label
												  self.provinceCode = e.value[0].value
											  }




											  if(e.value[1]){
													self.city = e.value[1].label
													self.cityCode = e.value[1].value
											  }else{
												  self.city = ""
												  self.cityCode =""
											  }



											  if(e.value[2]){

													self.area = e.value[2].label
													self.areaCode = e.value[2].value
											  }else{
												  self.area =""
												  self.areaCode = ""
											  }




										  },

										upper: function(e) {

														console.log(e)
										},
										lower: function(e) {
													console.log("lower");
											console.log(e)

											// this.getList()
										},
										scroll: function(e) {
														// console.log(e)
														// this.old.scrollTop = e.detail.scrollTop
										},
										goTop: function(e) {
														// 解决view层不同步的问题
														this.scrollTop = this.old.scrollTop
														this.$nextTick(function() {
															this.scrollTop = 0
														});
														uni.showToast({
															icon: "none",
															title: "纵向滚动 scrollTop 值已被修改为 0"
														})
										},
										onPulling(e) {
											// console.log("onpulling", e);
										},
										onRefresh() {
											    let _this = this;
												console.log("onRefresh");
												if (_this._freshing) return;

												// _this.triggered = true;

												//界面下拉触发，triggered可能不是true，要设为true
												if (!_this.triggered) {
													_this.triggered = true;
												}

												this._freshing = true;
												setTimeout(() => {
													this.triggered = false;
													this._freshing = false;
												}, 1000)
										},
										onRestore() {
											// this.triggered = 'restore'; // 需要重置
											console.log("onRestore");

											let _this = this;
												_this.triggered = false;
												_this._freshing = false;
										},
										onAbort() {
											console.log("onAbort");
										},
			// oncity() {
			// 	console.log("111111111111111")
			// 	var that = this
			// 	// this.$refs.popupRef.show();
			// },
			// back_city(e) {
			// 	// if (e !== 'no') {
			// 	// 	this.region = e.cityName
			// 	// 	this.$refs.popupRef.close();
			// 	// } else {
			// 	// 	this.$refs.popupRef.close();
			// 	// }
			// },
			clear() {
				this.title = '';
				this.cateName = '';
				this.catePid ='';
				this.cateTid = '';
				this.cateId ='';
				this.shopCateId = '';
				this.page = 1;
				this.getList();
			},
			reset() {
				this.checkArr_t=[];
				this.province = '';
				this.city = '';
				this.area = '';
				this.max = '';
				this.min = '';
				console.log("")
				this.$refs.popup.close()



				this.page = 1;
				this.loadingType='more'
				this.getList();
				// this.$refs.popup.open('right')

			},
			seach() {
				this.page = 1;
				this.loadingType='more'
				this.getList();
				this.$refs.popup.close();
			},
			chooseProvince(item) {
				if(this.province == item) {
					this.province = '';
				}else{
					this.province = item;
				}
			},
			changeSort(type) {
				if(type == 'price'){
					this.sort = this.sort == 'price desc' ? 'price asc' : 'price desc';
				}else{
					this.sort = type;
				}
				this.page = 1;
				this.list = [];
				self.loadingType='more'
				this.getList();
			},


		goTab(route) {
			if (!route) return;
				this.$mRouter.switchTab({ route });

		},

		// /*初始化滚动*/
		// initScroller(scroller) {
		// 	this.scroller = scroller;
		// },
		/*刷新数据*/
		refreshData() {
			// console.log("refreshData");
			// uni.showLoading({
			// 	title: '刷新中'
			// });
			// this.scroller.resetUpScroll();

		},
		/*加载数据*/
		loadData() {
			this.slider = [];
			this.list = [];
			this.currentSliderIndex = 0;
			this.page=1;
			this.getList()
			// if(typeof(this.scroller.resetUpScroll)=='function'){
			//     this.scroller.resetUpScroll();
			// }
		},

		/*获取子类别数据*/
		getCategory() {

			const params = {};
			params.id = this.id;
				$.ajax({
					url: shopApi.goodsCateApi,
					data: {
						type: 2,//1普通>>2服务
						sort: self.sort,
						status: '',
						page: self.page,
						pageSize: self.pageSize,
						// spreadStatus: self.isSpread ? '1' : '',
					},
					method: 'GET',
					success(res) {
						self.category  =  res.data;
						// console.log(typeof(self.category[0]))

						let allitem = {
							id:0,
							name:"不限"
						}
						// console.log(allitem)
						// let temp = self.category


					    self.category.unshift(allitem);
				        // self.category  = [...allitem, ...res.data ];
						// console.log(self.category)
						// console.log(typeof(self.category[0]))
						self.category_id = self.category[0].id
						// console.log(self.category_id)
						// self.getList()
					}
				})

		},

		/*获取数据*/
		getList() {

			console.log("self.loadingType",self.loadingType)
			if(self.loadingType=='nomore'){
			    return;
			}


			let chooseAddressinfo	 = 	uni.getStorageSync('chooseAddressinfo');
			let	currentAddressinfo	 =  uni.getStorageSync('currentAddressinfo');
			if(!chooseAddressinfo){
				chooseAddressinfo = currentAddressinfo
				uni.setStorageSync('chooseAddressinfo',chooseAddressinfo);

			}


			// this.keyword = uni.getStorageSync('article_keyword');
			// console.log("keyword", this.category_id)
			// if(!this.category_id ||  this.category_id==0 ) return
			$.ajax({
				url: shopApi.shopListWithCateByCateId,
				data: {

					latitude: chooseAddressinfo.latitude,
					longitude: chooseAddressinfo.longitude,
					cateId: this.category_id,



					name: self.name,

					province: self.province,
					city:self.city,
					area:self.area,
					provinceCode: self.provinceCode,
					cityCode:self.cityCode,
					areaCode:self.areaCode,



					type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
					sort: self.sort,
					status: '',
					minAmount: self.min,
					maxAmount: self.max,




					page: self.page,
					pageSize: self.pageSize,
					spreadStatus: self.spread != '' ? '1' : '',
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude')



					// page: self.page,
					// pageSize: self.pageSize,
					// spreadStatus: self.isSpread ? '1' : '',
				},
				method: 'GET',
				success(res) {
					// 	// console.log(res)
					// let list = [];
					// if (self.page != 1) {
					// 	list = self.list.concat(res.data.list);
					// } else {
					// 	list = res.data.list ? res.data.list : [];
					// }
					// self.totalPage = res.data.totalPage;
					// self.list  = list;
					// // console.log(self.list )
//
					self.loading = false;
					self.loadingType = res.data.list.length === 20 ? 'more' : 'nomore';
					if(res.data.list.length ==0){
							self.page=1;
							self.list = [];
					}else{
						self.list = [...self.list, ...res.data.list];



						// self.showPageLoading = false;

						if(self.loadingType=='more'){
							self.page++;
								// self.scroller.endSuccess(res.data.list.length,true);
						}else{
								// self.scroller.showNoMore();
						}
					}



				}
			})
		},

		/*切换导航*/
		categoryChange(category_id, index) {
			this.loadingType ='more'
			this.showMenu = false;
			this.category_index = index;
			this.category_id = category_id;


			var nextIndex = index - 1;
			nextIndex = nextIndex <= 0 ? 0 : nextIndex;
			this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
			this.loadData();


		},

		// /**@param {type}  轮播事件减少*/
		leftImg() {
		       let self  = this;
		             self.loadingType ='more'
		             self.showMenu = false;
					 if(self.category_index<=0){}


		       		 let index =  self.category_index-1

					 if(index<0){
						 index = 0
						 return
					 }
					 console.log("index",index)
		             self.category_index = index;

						if(self.category[self.category_index]==null ||  self.category[self.category_index]=="undefined")   {
							return
						}

		       			      console.log(" self.category", self.category)



		       			for (let i = 0; i < self.category.length; i++) {
		       			let cate =  self.category[i]

		       			   if(self.category_id==cate.id){
		       					console.log("index",index)
		       					console.log("cate1",self.category[  self.category_index])
		       					self.category_id  =  self.category[  self.category_index].id
		       					break;
		       			   }



		       			}



		             var nextIndex = index - 1;
		             nextIndex = nextIndex <= 0 ? 0 : nextIndex;
		             this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
		             this.loadData();
		},
		// /**@param {type}  轮播事件增加*/
		rightImg(){
			let self  = this;
		       self.loadingType ='more'
		       self.showMenu = false;
			   let index =  self.category_index+1


			   if(index>self.category.length-1){
			   						 index = self.category.length-1
			   						 return
			   }


		       self.category_index = index;

				if(self.category[self.category_index]==null ||  self.category[self.category_index]=="undefined")   {
					return
				}

			      console.log(" self.category", self.category)



				for (let i = 0; i < self.category.length; i++) {
				let cate =  self.category[i]

				   if(self.category_id==cate.id){
						console.log("index",index)
						console.log("cate1",self.category[  self.category_index])
						self.category_id  =  self.category[  self.category_index].id
						break;
				   }

				}


		       var nextIndex = index - 1;
		       nextIndex = nextIndex <= 0 ? 0 : nextIndex;
		       this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
		       this.loadData();
		},


		/*广告切换*/
		sliderChange: function(e) {
			this.currentSliderIndex = e.detail.current;
		},

		/*滚动时导航栏浮动*/
		navFloatShow(scroller) {
			if (scroller) {
				if (scroller.scrollTop > 60) {
					if (!this.showNavFloat) {
						this.showNavFloat = true;
					}
				} else {
					if (this.showNavFloat) {
						this.showNavFloat = false;
					}
				}
			}
		},
		/*菜单框展示*/
		menuShow(value) {
			this.showMenu = value;
		},
		/*隐藏导航浮动*/
		navFloatHide() {
			this.showNavFloat = false;
		},
		/**
		 * 打开地图
		 *
		 */
		showMaoLocation: function(e) {
			console.log(e)
			if (!e.latitude || !e.longitude){
				uni.showToast({
					title: '缺少经纬度信息无法查看地图',
					icon: 'none'
				})
				return
			}
				uni.openLocation({
					latitude: parseFloat(e.latitude),
					longitude: parseFloat(e.longitude),
					scale: 8,
					name: e.name,
					address: e.address,
					success: function() {
		
					},
				});
		
		},
	}
};
</script>
<style scoped>
	@import url('../../static/css/search/list.css');
</style>
<style scoped lang="scss">
page {
	height: 100%;
}
.page {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
}
.content {
	flex: 1;
	width: 100%;
	height: 100rpx;
}

/*头部*/
.top {
	/*页面标题*/
	.page-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
		z-index: 9999;
		line-height: 1;
		image {
			height: 50rpx;
			width: 280rpx;
			margin-left: -35rpx;
		}
	}

	/*搜索*/
	.search {
		padding: 24rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.logo {
			height: 60rpx;
			width: 474rpx;
			margin-right: 30rpx;
		}
		.input {
			margin-left: 0 !important;
			display: flex;
			align-items: center;
			height: 70rpx;
			width: 100%;
			background: #f5f5f5;
			border-radius: 34rpx 34rpx 0 34rpx;
			::v-deep .icon {
				margin-left: 28rpx;
				color: #aaaaaa;
				font-size: 32rpx;
				line-height: 1;
			}
			text {
				margin-left: 14rpx;
				font-size: 30rpx;
				color: #aaaaaa;
				line-height: 1;
			}
		}
		.user{
			display: flex;
			align-items: center;
			::v-deep .icon {
				margin-left: 24rpx;
				color: #aaaaaa;
				font-size: 38rpx;
				margin-top: 4rpx;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-left: 25rpx;
			}
		}
	}

	/* 顶部navbar */
	.navbar {
		// width: 80%;
	 //    padding:0 20rpx;
		/*分类*/
		.menu {
			// padding:20rpx;
		     // width: 100%;
			// position: relative;
			// height: 60rpx;
			// white-space: nowrap;
			// padding: 15rpx 0 6rpx;
			z-index: 10;
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			text-align: center;
			/*分类*/
			.category {
				flex:1;
				width: 80%;
				margin:0 auto;
				// border:1px solid #ff0000;
				// width: 90%;
				// margin:0 auto;
				white-space: nowrap;
				// position: relative;
				scroll-view {
					width: 100%;
					.item {
						position: relative;
						display: inline-block;
						// margin: 0 20rpx 0;
						height: 80rpx;
						line-height: 80rpx;
						text-align: left;
						padding:  0;
						margin:20rpx 30rpx 20rpx 0;

						//line-height: 80rpx;
						&:first-child {
							margin-left: 10rpx;
						}
						&:after {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							transition: 0.3s;
						}
						.text {
							position: relative;
							width: auto;
							height: auto;
							line-height: auto;
							display: inline-block;
							text {
								font-size: 30rpx;
								// font-weight: bold;
								color: #000;
							}
							image {
								position: absolute;
								top: 16rpx;
								right: -14rpx;
								width: 50rpx;
								height: 50rpx;
								display: none;
							}
						}
					}
					// .current {
					// 	&:after {
					// 		width: 50%;
					// 	}
					// 	.text {
					// 		text {
					// 			font-size: 40rpx;
					// 			font-weight: bold;
					// 			color: #262626;
					// 		}
					// 		image {
					// 			display: block;
					// 		}
					// 		border-bottom: 6rpx solid #3869E6;
					// 	}
					// }
				}
			}
			.list {
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				//box-shadow: -4rpx 0 0 #e9ebee;
				//box-shadow: -2px 0 0 #262626;
				::v-deep .icon {
					font-size: 36rpx;
					margin-top: -6rpx;
				}
			}
		}
	}
}
.menu-block {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 20rpx 0 50rpx;
	z-index: 100;
	width: 100%;
	//box-shadow: 0 15rpx 10rpx -15rpx #e9ebee;
	.list {
		padding-left: 10rpx;
		text {
			background: #f5f7fa;
			border-radius: 8rpx;
			font-size: 32rpx;
			margin: 12rpx 20rpx;
			display: inline-block;
			height: 72rpx;
			width: 144rpx;
			line-height: 72rpx;
			text-align: center;
		}
		.current {
			color: #fff;
			background: #3869E6;
			//font-size: 32rpx;
		}
	}
}

.scroll {
	height: 100%;
}

/*幻灯片广告 */
.swiper {
	height: 350rpx;
	margin: 14rpx 24rpx 0;
	image {
		height: 350rpx;
		width: 100%;
		border-radius: 15rpx;
		//box-shadow: 0 0 12px #dddee1;
	}
	.current {
		width: 97%;
		height: 350rpx;
		margin: 1.5% 1.5%;
		transition: all 0.2s ease-in 0s;
	}
	.item {
		position: relative;
		.title {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			text {
				margin: 7% 6%;
				display: flex;
				align-items: center;
				//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
				//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
				color: #fff;
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 34rpx;
				padding: 14rpx 20rpx;
				max-width: 610rpx;
				line-height: 1.3;
				border-radius: 5rpx;
			}
		}
	}
}

/*浮动navbar*/
.floatbar {
	//border-bottom: 1rpx solid #e8e8e8;
	box-shadow: 0px 2px 2px -2px #e8e8e8;
	padding-bottom: 12rpx;
}

::v-deep .no-data {
	margin-top: 200rpx;
}


	.section {
		position: relative;
	  padding: 44rpx 0 0 20rpx;
	  background-image: linear-gradient(180deg, #ffc300 0%, #ffffff00 100%);
	  overflow: hidden;
	  height:280rpx;
	}
	.group {
	  flex: 1 1 361rpx;
	}
	.space-x-8 > view:not(:first-child),
	.space-x-8 > text:not(:first-child),
	.space-x-8 > image:not(:first-child) {
	  margin-left: 16rpx;
	}
	.image_2 {
	  width: 38rpx;
	  height: 38rpx;
	}
	.text {
	  color: #081329;
	  font-size: 24rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 23rpx;
	}
	.text_2 {
	  margin-top: 40rpx;
	  color: #000000;
	  font-size: 46rpx;
	  line-height: 43rpx;
	}
	.font_1 {
	  font-size: 28rpx;
	  line-height: 26rpx;
	  color: #081329;
	}
	.text_3 {
	  margin-left: 8rpx;
	  margin-top: 20rpx;
	  color: #000000;
	  font-size: 29rpx;
	  line-height: 27rpx;
	}
	.image {
		margin-top:50px;
	  flex: 1 1 361rpx;
	  width: 359rpx;
	  height: 360rpx;
	}
	.space-x-4 > view:not(:first-child),
	.space-x-4 > text:not(:first-child),
	.space-x-4 > image:not(:first-child) {
	  margin-left: 8rpx;
	}

.section_4 {
  background-image: linear-gradient(90deg, #ffc300 0%, #cccccc00 100%);
  height: 18rpx;
}


.equal-division {
  margin-right: 16rpx;
}
.equal-division-item {
  padding: 16rpx 20rpx;
  background-color: #ffffff;
  border-radius: 308rpx;
  height: 56rpx;
}
.space-x-34 > view:not(:first-child),
.space-x-34 > text:not(:first-child),
.space-x-34 > image:not(:first-child) {
  margin-left: 68rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 22rpx;
  color: #636363;
}
.image_3 {
  width: 24rpx;
  height: 24rpx;
}



	.font_cate_text {
	  font-size: 28rpx;
	  line-height: 26rpx;
	  /* color: #081329; */

	  padding: 12rpx;
	  /* background-color: #43cf7c1a; */
	  border-radius: 4rpx;
	}

.space-x-4:nth-child(2n+0)
{
	margin-left:10px;
}
.space-x-4:nth-child(2n+1)
{

}


.space-x-4:nth-child(3n+0) .text-wrapper_7
{
	background-color: #43cf7c1a;
		  color:#43cf7c
}

.space-x-4:nth-child(3n+1) .text-wrapper_7
{
	background-color: #42cccf1a;
		  color:#42cccf
}

.space-x-4:nth-child(3n+2) .text-wrapper_7
{
	background-color: #FAF2EC;
	color:#cf7d42
}



	// .text-wrapper_7 {
	//   background-color: #43cf7c1a;
	//   	  color:#43cf7c
	// }

	// .text-wrapper_8 {
	//   background-color: #42cccf1a;
	//   	  color:#42cccf
	// }

	// .text-wrapper_9 {
	//   background-color: #FAF2EC;
	//   color:#cf7d42
	// }




	.pos {
	  position: absolute;
	  left: 0;
	  right: 3rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.text_4 {
	  margin-right: 36rpx;
	}
	.group_3 {
	  padding: 22rpx 16rpx 0;
	}
	.equal-division {
	  margin-right: 16rpx;
	}
	.equal-division-item {
	  padding: 16rpx 20rpx;
	  background-color: #ffffff;
	  border-radius: 308rpx;
	  height: 56rpx;
	}
	.space-x-34 > view:not(:first-child),
	.space-x-34 > text:not(:first-child),
	.space-x-34 > image:not(:first-child) {
	  margin-left: 68rpx;
	}
	.font_2 {
	  font-size: 24rpx;
	  font-family: AlibabaPuHuiTi;
	  line-height: 22rpx;
	  color: #636363;
	}
	.image_3 {
	  width: 24rpx;
	  height: 24rpx;
	}
	.list {
	  margin-top: 22rpx;
	  padding-left: 6rpx;
	}
	.space-y-12 > view:not(:first-child),
	.space-y-12 > text:not(:first-child),
	.space-y-12 > image:not(:first-child) {
	  margin-top: 24rpx;
	}
	.list-item_1 {
	  background-color: #ffffff;
	  border-bottom: solid 1rpx #0000000d;
	}
	.image_4 {
	  width: 276rpx;
	  height: 186rpx;
	}
	.group_1 {
	  margin-left: 24rpx;
	  margin-top: 12rpx;
	}
	.font_4 {
	  font-size: 20rpx;
	  line-height: 26rpx;
	  color: #666e7a;
	}
	.group_6 {
	  padding-bottom: 8rpx;
	}
	.space-x-4 > view:not(:first-child),
	.space-x-4 > text:not(:first-child),
	.space-x-4 > image:not(:first-child) {
	  margin-left: 8rpx;
	}
	.text-wrapper {
	  padding: 12rpx 0;
	  background-color: #43cf7c1a;
	  width: 104rpx;
	  height: 40rpx;
	}
	.font_3 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #43cf7c;
	}
	.text-wrapper_2 {
	  padding: 12rpx 0;
	  background-color: #42cccf1a;
	  width: 104rpx;
	  height: 40rpx;
	}
	.font_5 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #42cccf;
	}
	.text-wrapper_4 {
	  padding: 12rpx 0;
	  background-color: #cf7d421a;
	  width: 104rpx;
	}
	.font_7 {
	  font-size: 20rpx;
	  line-height: 19rpx;
	  color: #cf7d42;
	}
	.view {
	  margin-left: 36rpx;
	  margin-right: 4rpx;
	  padding: 16rpx 0 44rpx;
	}
	.text-wrapper_1 {
	  margin-right: 4rpx;
	  padding: 16rpx 0;
	  background-color: #ffbd52;
	  width: 126rpx;
	}
	.font_6 {
	  font-size: 24rpx;
	  line-height: 22rpx;
	  color: #ffffff;
	}
	.space-y-8 > view:not(:first-child),
	.space-y-8 > text:not(:first-child),
	.space-y-8 > image:not(:first-child) {
	  margin-top: 16rpx;
	}
	.space-y-36 > view:not(:first-child),
	.space-y-36 > text:not(:first-child),
	.space-y-36 > image:not(:first-child) {
	  margin-top: 72rpx;
	}
	.equal-division_2 {
	  margin-top: 14rpx;
	}
	.section_5 {
	  padding: 24rpx 0;
	  background-color: #ffffff;
	  overflow: hidden;
	}
	.group_7 {
	  flex: 1 1 150rpx;
	}
	.equal-division-item_2 {
	  padding: 12rpx 0;
	}
	.space-y-4 > view:not(:first-child),
	.space-y-4 > text:not(:first-child),
	.space-y-4 > image:not(:first-child) {
	  margin-top: 8rpx;
	}
	.image_5 {
	  width: 48rpx;
	  height: 48rpx;
	}
	.font_8 {
	  font-size: 20rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 19rpx;
	  color: #666e7a;
	}
	.text_5 {
	  color: #ffbd52;
	  line-height: 18rpx;
	}
	.text_6 {
	  line-height: 18rpx;
	}
	.text_7 {
	  line-height: 18rpx;
	}
	.text_8 {
	  line-height: 18rpx;
	}
	.text_9 {
	  line-height: 18rpx;
	}










	.shop_section_5 {
	  padding-bottom: 20rpx;
	  background-color: #ffffff;
	  border-bottom: solid 1rpx #0000000d;
	}
	.shop_section_5:first-child {
	  margin-top: 0;
	}
	.shop_item {
	  // margin-left: 6rpx;
	}
	.shop_image_7 {
	  width: 240rpx;
	  height: 186rpx;
	  margin-right:20rpx;
	}
	.shop_font {
	  font-size: 28rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 26.3rpx;
	  color: #081329;
	}
	.shop_font_2 {
	  font-size: 20rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 18.56rpx;
	  // color: #43cf7c;
	}
	.shop_text {
	color: #43cf7c;
	  line-height: 18.54rpx;
	}
	.shop_font_3 {
	  font-size: 20rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 18.56rpx;
	  color: #666e7a;
	}
	.shop_text_2 {
	  line-height: 40rpx;
	  font-size:20rpx
	}
	.shop_group_3 {
	  padding-bottom: 8rpx;
	  margin-top:0;

	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: start;
	  flex:1;
	}
	.shop_group_3 .text-wrapper {
	  width:30%;
	  padding: 12rpx 0;
	   margin-bottom:5rpx;
	  background-color: #43cf7c1a;
	  // width: 104rpx;
	  height: 40rpx;


	}


	.shop_group_3 .text-wrapper:nth-child(2n+0)
	{
	   margin-right:0;
	}
	.shop_group_3 .text-wrapper:nth-child(2n+1)
	{
	  margin-right:3%;
	}
	 .shop_group_3 .text-wrapper:nth-child(2n+2)
	{
	  margin-right:3%;
	}


	.shop_group_3 .text-wrapper:nth-child(4n+0)
	{
	background-color: #43cf7c1a;
		  color:#43cf7c
	}

	.shop_group_3 .text-wrapper:nth-child(4n+1)
	{
	background-color: #42cccf1a;
		  color:#42cccf
	}

	.shop_group_3 .text-wrapper:nth-child(4n+2)
	{
			background-color: #FAF2EC;
			color:#cf7d42
	}


	.shop_group_3 .text-wrapper:nth-child(4n+3)
	{
		background-color: #42cccf1a;
			  color:#42cccf
	}
	.shop_group_3 .text-wrapper:nth-child(4n+4)
	{
		background-color: #43cf7c1a;
			  color:#43cf7c

	}

	// .shop_group_3 .text-wrapper:nth-child(4n+5)
	// {
	// background-color: #FAF2EC;
	// 		color:#cf7d42
	// }




	.shop_text-wrapper_2 {
	  padding: 12rpx 0;
	  background-color: #42cccf1a;
	  width: 104rpx;
	  height: 40rpx;
	}
	.shop_font_4 {
	  font-size: 20rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 18.56rpx;
	  color: #42cccf;
	}
	.shop_text-wrapper_4 {
	  padding: 12rpx 0;
	  background-color: #cf7d421a;
	  width: 104rpx;
	}
	.shop_font_6 {
	  font-size: 20rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 18.56rpx;
	  color: #cf7d42;
	}
	.shop_text_3 {
	  line-height: 18.52rpx;
	}
	.shop_text-wrapper_3 {
	  margin-right: 4rpx;
	  padding: 16rpx 0;
	  background-color: #ffbd52;
	  width: 126rpx;
	  height: 52rpx;
	}
	.shop_font_5 {
	  font-size: 24rpx;
	  shop_font-family: SourceHanSansCN;
	  line-height: 22.08rpx;
	  color: #ffffff;
	}

.section_top{
	// height:360rpx;
}
.scroll-Y{
	z-index:99999;
	height:calc(100vh - 640rpx)
}
</style>

